<template>
  <div class="hero is-info is-fullheight" ref="hero">
    <div class="hero-head">
      <MainNavbar />
    </div>
    <div class="hero-body">
      <div class="container has-text-centered">
        <h1 class="is-size-1 mb-1">{{title}}</h1>
        <DownIcon @click.native="minimizeHero" />
      </div>
    </div>
  </div>
</template>

<script>
import MainNavbar from "./MainNavbar";
import DownIcon from "./icons/DownIcon";
export default {
  components: {
    MainNavbar,
    DownIcon
  },
  methods: {
    minimizeHero(e) {
      this.$refs.hero.classList.toggle("min");
    }
  },
  props: {
    title: String
  }
};
</script>

<style scoped>
.hero {
  transition: min-height 1s ease-in;
  background-image: url("/nightsky.jpg");
  background-position: center center;
  background-size: cover;
}
.min {
  min-height: 0 !important;
}
.down-btn {
  height: 2rem;
}
.down-btn path {
  fill: red;
}
.mb-1 {
  margin-bottom: 1rem;
}
</style>